import type { FC } from 'react';
import { useMemoizedFn } from 'ahooks';
import { Row, Col, Button } from 'antd';
import { ProForm, ProFormText, ProFormSelect, ProFormCheckbox } from '@ant-design/pro-components';
import EditModal, { type EditModalProps } from '../EditModal';
import { patternMoreThan0Integer } from '@/utils/formRule';
import { XDirection, YDirection, NumType } from './enum';
import type { SeatsNumberOpts } from '../Canvas/types';

export type SeatNumberValues = Omit<SeatsNumberOpts, 'selectedSeats'>;

const titleStyle = {
  color: '#666',
  fontSize: 13
}

type Props = EditModalProps<SeatNumberValues> & {
  onDelete?: () => any;
}

const EditSeatNo: FC<Props> = (props) => {
  const { onDelete, ...rest } = props;

  const delSeatNumber = useMemoizedFn(async () => {
    await props.onDelete?.();
    props.onClose?.();
  });

  return (
    <EditModal
      {...rest}
      title="座位编号设置"
      labelCol={{ flex: '90px' }}
      submitter={{
        searchConfig: {
          submitText: '保存编号',
        },
        render: (_, doms) => {
          doms.splice(1, 0, (
            <Button
              danger
              key="del"
              type="primary"
              children="删除编号"
              onClick={delSeatNumber}
            />
          ));
          return doms;
        }
      }}
    >
      <ProForm.Group
        title="排编号规则"
        titleStyle={titleStyle}
      >
        <Row gutter={16}>
          <Col span={12}>
            <ProFormSelect
              required
              label="编号方向"
              initialValue="bottom"
              name={['row', 'direction']}
              valueEnum={YDirection}
              rules={[
                { required: true }
              ]}
            />
          </Col>
          <Col span={12}>
            <ProFormSelect
              label="编号类型"
              initialValue="number"
              name={['row', 'type']}
              valueEnum={NumType}
              required
              rules={[
                { required: true }
              ]}
            />
          </Col>
          <Col span={12}>
            <Row gutter={10}>
              <Col span={16}>
                <ProFormText
                  label="编号前缀"
                  name={['row', 'prefix']}
                />
              </Col>
              <Col span={8}>
                <ProFormCheckbox name={['row', 'prefixOnly']}>
                  只使用前缀
                </ProFormCheckbox>
              </Col>
            </Row>
          </Col>
          <Col span={12}>
            <ProFormText
              label="启始值"
              initialValue={1}
              name={['row', 'startNum']}
              rules={[patternMoreThan0Integer]}
            />
          </Col>
          <Col span={12}>
            <ProFormText
              label="步长"
              initialValue={1}
              name={['row', 'step']}
              rules={[patternMoreThan0Integer]}
            />
          </Col>
        </Row>
      </ProForm.Group>
      <ProForm.Group
        title="列编号规则"
        titleStyle={titleStyle}
      >
        <Row gutter={16}>
          <Col span={12}>
            <ProFormSelect
              label="编号方向"
              name={['column', 'direction']}
              initialValue="right"
              valueEnum={XDirection}
              rules={[
                {
                  required: true
                }
              ]}
            />
          </Col>
          <Col span={12}>
            <ProFormSelect
              label="编号类型"
              name={['column', 'type']}
              initialValue="number"
              valueEnum={NumType}
              rules={[
                {
                  required: true
                }
              ]}
            />
          </Col>
          <Col span={12}>
            <ProFormText
              label="启始值"
              initialValue={1}
              name={['column', 'startNum']}
              rules={[patternMoreThan0Integer]}
            />
          </Col>
          <Col span={12}>
            <ProFormText
              label="步长"
              initialValue={1}
              name={['column', 'step']}
              rules={[patternMoreThan0Integer]}
            />
          </Col>
        </Row>
      </ProForm.Group>
    </EditModal>
  );
}


export default EditSeatNo;
